<template>
  <div>
    <van-button 
      icon="plus"
      round 
      block
      class="add_goods_type_button"
      @click="add_show = true"
      >
      添加商品类别
    </van-button>
    <div class="goods_type" v-for="(item,i) in goods_list" :key="i">
      <div class="goods_type_content">
        {{ item.name }}
      </div>
      <div></div>
      <van-button 
        round
        color="linear-gradient(to right, #ff8360, #ee0a24)" 
        class="goods_type_button"
        @click="del_goodstype(item.id)"
        >
        删除
      </van-button>
      <van-button 
        round
        class="goods_type_button"
        @click="up_show(item)"
        >
        修改
      </van-button>
    </div>
    
    <van-dialog 
      title="添加类别"
      v-model:show="add_show" 
      :show-confirm-button="false"
      close-on-click-overlay
      class="shops_goods_type_dialog"
    >
      <van-form @submit="add_goodstype">
        <van-field placeholder="名称" v-model="goods_type.name" maxlength="20"/>
        <van-button round block color="linear-gradient(to right, #ff8360, #ee0a24)" 
          native-type="submit"
          class="dialog_button"
          >
          添加
        </van-button>
      </van-form>
    </van-dialog>

    <van-dialog 
      title="修改类别"
      v-model:show="update_show" 
      :show-confirm-button="false"
      close-on-click-overlay
      class="shops_goods_type_dialog"
    >
      <van-form @submit="up_goodstype">
        <van-field placeholder="名称" v-model="goods_type.name" maxlength="20"/>
        <van-button round block color="linear-gradient(to right, #ff8360, #ee0a24)" 
          native-type="submit"
          class="dialog_button"
          >
          保存
        </van-button>
      </van-form>
    </van-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      goods_list: [],
      user_id: localStorage.getItem("id"),
      active:null,
      goods_type:{
        name:null,
      },
      add_show:false,
      update_show:false,
    };
  },
  created() {
    this.submit();
  },
  methods: {
    submit: function () {
      this.myaxios(this.host + "shops/goods_type/", "get", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.goods_list = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    add_goodstype:function(){
      this.myaxios(this.host + "shops/goods_type/", "post", {
        user_id: this.user_id,
        name:this.goods_type.name
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    up_show(item){
      this.goods_type = JSON.parse(JSON.stringify(item));
      this.update_show = true
    },
    up_goodstype :function(){
      this.myaxios(this.host + "shops/goods_type/", "put", {
        user_id: this.user_id,
        id:this.goods_type.id,
        name:this.goods_type.name
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    del_goodstype :function(id){
      this.myaxios(this.host + "shops/goods_type/" + id, "delete", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data.data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>
.add_goods_type_button{
  position: sticky;
  top: 3vw;
  width: 100%;
  height: 10vw;
}
.goods_type{
  margin-top: 3vw;
  padding: 3vw;
  width: calc(100% - 6vw);
  min-height: 8vw;
  height: auto;
  overflow:hidden;
  background-color: white;
  border-radius: 2vw;
}
.goods_type_content{
  width: calc(100% - 39vw);
  min-height: 10vw;
  float: left;
  padding-left: 3vw;
}
.goods_type_button{
  margin-left: 2vw;
  float: right;
  width: 16vw;
  height: 8vw;
}
</style>